<template>
  <view class="progress">
    <view class="currentD" id="currentD" :style="'width:'+percentage+'%'"></view>
  </view>
</template>

// 进度条
<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    sold: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      percentage: 0,
    }
  },
  mounted () {
    this.percentage = parseInt((this.sold / (this.sold + this.total)) * 100)
  }
}
</script>

<style lang="scss" scoped>
.progress {
  height: 8rpx;
  width: 100%;
  background-color: #fedad8;
  margin-bottom: 8rpx;
  border-radius: 20rpx;
  overflow: hidden;
  .currentD {
    height: 8rpx;
    background-color: #ed1b19;
    max-width: 100%;
  }
}
</style>
